import './GateRoute.css'

import {useEffect, useState} from "react";
import {EMPTY_ROUTE_DEF, RouteDef} from "../model/RouteDef.ts";
import {Divider, Modal, Space, Table} from "antd";
import {
    addOrUpdateRouteFeatureDefinition,
    getRouteFeatureDefinitions,
    getRouteStableDefinitions,
    removeRouteFeatureDefinition
} from "../api/RouteFeatureApi.ts";
import {Page} from "../model/Page.ts";
import {RouteDefinitionEdit} from "../component/RouteDefinition.tsx";
import {PredicateButton} from "../component/ShowButton.tsx";
import {ModeProp} from "../component/BaseCompomentDef.tsx";
import {CheckCircleFilled, DeleteOutlined, EditOutlined, UndoOutlined} from '@ant-design/icons'

const { Column } = Table


interface TableRouteDef extends RouteDef{

    key : number

}

interface RouteDefinitionProp extends ModeProp{

    currPageIndex : number ,

    onLoad : ( pageIndex : number ) => Promise<Page<TableRouteDef>> ,

    onAppend? : ( routeDef : RouteDef ) => Promise<object>

    onModify? : ( routeDef : RouteDef , index : number ) => Promise<object>

    onRemove? : ( routeDef : RouteDef , index : number ) => Promise<object>

}

interface RouteDefOpt extends ModeProp {

    routeDef : RouteDef ,

    index : number ,

}

const EMPTY_ROUTE_DEF_OPT : RouteDefOpt = {

    routeDef : EMPTY_ROUTE_DEF ,

    index : -1

}



const RouteDefinitionsView = ( prop : RouteDefinitionProp ) => {
    const editable = prop.mode !== 'display'
    const onLoad = prop.onLoad!
    const onAppend = prop.onAppend || (()=> {} )
    const onModify = prop.onModify ||(()=>{})
    const onRemove =  prop.onRemove || (()=>{})


    const [ routeDefs , setRouteDefs ] = useState<Page<TableRouteDef>>( {} as Page<TableRouteDef>)
    const [ _routeDefOpt  , _setRouteDefOpt ] = useState(EMPTY_ROUTE_DEF_OPT)


    const reload = () => {
        onLoad(0).then( it => setRouteDefs(it) )
    }

    useEffect( reload , [onLoad] )

    const _onShow = ( e : RouteDef , index : number ) => {
        _setRouteDefOpt( { mode : 'display' , index : index , routeDef : e } )
    }

    const _onModify = (e : RouteDef , index : number ) => {
        _setRouteDefOpt( { mode : 'modify' , index : index , routeDef : e } )
    }

    const _onRemove = ( e : RouteDef , index : number ) => {
        const removed = onRemove( e , index )
        if ( removed ) {
            removed.then( e => {
                reload()
            })
        }
    }

    const _onCreateRouteDef = () => {
        _setRouteDefOpt( { ...EMPTY_ROUTE_DEF_OPT , mode : 'create' } )
    }

    const _onCancel = () => {
        _setRouteDefOpt( EMPTY_ROUTE_DEF_OPT )
    }

    const _onAppendOrModify = ( ) => {
        if (  _routeDefOpt.mode === 'create' ) {
            const append =  onAppend( _routeDefOpt.routeDef )
            if ( append ) {
                append.then( e => {
                    reload()
                })
            }
        } else if ( _routeDefOpt.mode === 'modify' ) {
            onModify( _routeDefOpt.routeDef , _routeDefOpt.index )
        }
        _setRouteDefOpt( EMPTY_ROUTE_DEF_OPT )
    }

    const _onChangeRouteDef = ( d : RouteDef ) => {
        _setRouteDefOpt( { ..._routeDefOpt , routeDef : d } )
    }

    const _rowClassName = ( d : RouteDef ) => {
        if (d && d.metadata && d.metadata.removed) {
            return 'bg-red'
        }
        return 'bg-green'
    }


    return <>
        <Modal
            width="80%"
            closable={false}
            open={ _routeDefOpt.mode === 'display' || _routeDefOpt.mode === 'modify' || _routeDefOpt.mode === 'create' }
            onCancel={_onCancel}
            onOk={ _onAppendOrModify }
        >
            <RouteDefinitionEdit
                mode="create"
                routeDef={ _routeDefOpt.routeDef }
                onChange={ _onChangeRouteDef }
            />
            <Divider></Divider>
        </Modal>
        <Table

            dataSource={ routeDefs.list }
            title={ ()=> { return <>
                <PredicateButton show={editable} onClick={ _onCreateRouteDef } children='create'/>
            </> }}
            rowClassName={ _rowClassName }
        >
            <Column title={"id"} render={ ( _ , e : TableRouteDef ) => {
                return <p className="text-2xl"> { e.id } </p>
            }} ></Column>
            <Column title={"uri"} render={(_, e : TableRouteDef) => {
                return <> { e.uri }  </>
            }} ></Column>
            <Column title={"action"} key={"action"} render={ ( _ , e : RouteDef , index ) => {
                return <>
                    <Space>
                        <PredicateButton
                            show={!editable}
                            key={0}
                            onClick={ ()=> _onShow(e,index)  }
                            children="display"
                        />
                        <PredicateButton show={editable} onClick={ ()=> _onModify(e,index) } > <EditOutlined/> </PredicateButton>
                        <PredicateButton show={editable} onClick={ ()=> _onRemove(e,index) } > <DeleteOutlined /> </PredicateButton>
                        <PredicateButton show={editable} onClick={ ()=> {} } > <UndoOutlined /> </PredicateButton>
                        <PredicateButton show={editable} onClick={ ()=> {} } > <CheckCircleFilled  /> </PredicateButton>
                    </Space>
                </>
            } } ></Column>
        </Table>
    </>
}



export const GateRouteFeatureDefinitionsView = ()  => {
    const onLoad = ( pageIndex : number ) =>  {
        return getRouteFeatureDefinitions().then(e => {
            return e.data.data
        } ).then( e => {
            const page : Page<TableRouteDef> = {
                pageIndex : pageIndex ,
                pageSize : e.length ,
                total : e.length ,
                list : e.map( ( it , index ) => { return { key : index , ...it } } )
            }
            return page
        })
    }
    const _onAppendRouteDef = ( routeDef : RouteDef ) => {
        return addOrUpdateRouteFeatureDefinition(routeDef)
    }

    const _onModifyRouteDef = ( routeDef : RouteDef  ) => {
        return addOrUpdateRouteFeatureDefinition(routeDef)
    }

    const _onRemoveRouteDef = ( routeDef : RouteDef ) => {
        return removeRouteFeatureDefinition( routeDef.id )
    }

    return <RouteDefinitionsView
        onLoad={ onLoad }
        onAppend={ _onAppendRouteDef }
        onModify={ _onModifyRouteDef }
        onRemove={ _onRemoveRouteDef }
        currPageIndex={ 0 }
        mode='none'
    ></RouteDefinitionsView>
}

export const GateRouteStableDefinitionsView = (  )  => {
    const onLoad = ( pageIndex : number ) =>  {
        return getRouteStableDefinitions().then(e => {
            return e.data.data
        } ).then( e => {
            const page : Page<TableRouteDef> = {
                pageIndex : pageIndex ,
                pageSize : e.length ,
                total : e.length ,
                list : e.map( ( it , index ) => { return { key : index , ...it } } )
            }
            return page
        })
    }
    return <RouteDefinitionsView
        onLoad={ onLoad }
        currPageIndex={ 0 }
        mode='display'
    ></RouteDefinitionsView>
}


